
<template>

    <Card v-model="detail" style="height:88vh;overflow:auto">
        <div class="box">
            <div class="column-1"  style="float: left;">
                <span>任务Id:</span><pre>{{ detail.id }}</pre>
                <span>任务名称:</span><pre>{{ detail.name }}</pre>
                <span>任务节点:</span><pre>{{ detail.nodes }}</pre>
                <span>任务周期:</span><pre>{{ detail.spec }}</pre>
                <span>任务类型:</span><pre>{{ detail.type }}</pre>
                <span>任务包链接:</span><pre><a>{{ detail.package }}</a></pre>
                <span>创建时间:</span><pre>{{ detail.create_time }}</pre>
                
            </div>
            <div class="column-2">
                <span>更新时间:</span><pre>{{ detail.update_time }}</pre>
                <span>编程语言:</span><pre>{{ detail.language  }}</pre>
                <span>运行文件:</span><pre>{{ detail.run_file }}</pre> 
                <span>任务参数:</span><pre>{{ detail.params  }}</pre>
                <span>超时设置:</span><pre>{{ detail.timeout }}</pre>
                <span>报警接收邮件:</span><pre>{{ detail.managers }}</pre>
                <span>任务备注:</span><pre>{{ detail.description }}</pre>

            </div> 
        </div>
    </Card>

</template>


<script>

import { post } from '@/api/http'
import { task_detail} from  '@/api'
import store from '@/store'
export default {
    data() {
        return {
            sharedState: store.state,
            detail: {},

        }
    },
    methods: {
        refresh() {
            let query = this.$router.currentRoute.query
            let id = parseInt(query.id)
            // console.log(id,typeof(id))
            let data = {"id":id}
            post(task_detail,data).then( (response) => {
                this.detail = response.data
            })
        }
    },
    mounted: function() {
        this.refresh()
    }
}
</script>
<style scoped>
    span {
        color: purple;
    }
    .box {
        display: flex;
        display: -webkit-flex; 
    }
    .column-1 {
        width:60%;
    }
    .column-2 {
        flex:1;
        width: 40%;
    } 

    .column-1,.column-2,.column-3 {
        box-sizing: border-box;
    }
</style>
<style >
    pre{
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space:normal!important;
    }
</style>